Code Breakers | No-code solutions

💻 Как разработать таск-трекер на Bubble: делаем посадочную страницу

В конце ноября мы уже начали рассказывать про один из самых простых для создания IT-продуктов — таск-трекер на Bubble. Если пропустили начало, — ищите его по хештегу #code_breakers_как_разработать_таск_трекер_на_Bubble.

Второй этап. Делаем посадочную страницу
Разработка происходит на странице Index. В темплейте страница собрана. Удалим всё и соберём заново через «Библиотеку компонентов». Библиотека находится справа на верхней панели под кнопкой Components.

Перетаскиваем из библиотеки:
🔹хедер;
🔹главный экран с большим изображением;
🔹3 экрана с описанием сервиса: один с картинкой справа, второй с картинкой слева, третий с картинкой справа;
🔹экран с отзывами;
🔹футер.

Следите, чтобы каждая новая группа компонентов ставилась ровно под предыдущую — при перетаскивании система покажет, куда именно вы ставите: верхняя группа подсветится красной рамкой, а в месте установки будет синяя черта. Даже если ошибётесь, ничего — на левой панели в Element tree посмотрите, куда и что встало, и перетащите в нужные места.

Здесь можно отредактировать тексты, удалить из хедера ненужные кнопки и ссылки, прописать или вставить логотип, добавить фотографии и скриншоты. Фоновый цвет для футера и первого экрана первой страницы предлагается делать одинаковым, чтобы получился единый переход. И это классное решение, но финальное — за вами, вы же разработчик.

На этом этапе поработайте с адаптивностью. Чтобы ваше приложение хорошо смотрелось на любых экранах, не делайте им минимальную фиксированную ширину. 

Следуйте вот этому правилу: главная группа (родительский компонент), в котором лежат остальные компоненты, растягивается по всей ширине экрана. Следующая в иерархии группа (child-компонент, «ребёнок») с определённой максимальной шириной. А компоненты (также child-компоненты) внутри уже адаптируются под конкретный размер контента.

К примеру, вся Index страница — 1440 рх шириной, выравнивание типа колонка с последовательным расположением групп на ней. Все следующие группы — её child-компоненты. Им выставляйте нулевую минимальную ширину (чтобы она адаптировалась под меньшие размеры экрана) и максимальную ширину 1200 рх, чтобы она не растягивалась. Внутри компоненты должны быть адаптированы под конкретный контент: текст или фотографии.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». У нас осталось 4 свободных места на ближайший поток, который стартует 20 декабря 💙

ХОЧУ ОСВОИТЬ BUBBLE: codebreakers.tech/bubble

www.tg-me.com/ms/Code Breakers | No code solutions/com.code_breakers/672

2.6K viewsDec 7, 2023 at 08:00

💻 Как разработать таск-трекер на Bubble: делаем посадочную страницу

В конце ноября мы уже начали рассказывать про один из самых простых для создания IT-продуктов — таск-трекер на Bubble. Если пропустили начало, — ищите его по хештегу #code_breakers_как_разработать_таск_трекер_на_Bubble.

Второй этап. Делаем посадочную страницу
Разработка происходит на странице Index. В темплейте страница собрана. Удалим всё и соберём заново через «Библиотеку компонентов». Библиотека находится справа на верхней панели под кнопкой Components.

Перетаскиваем из библиотеки:
🔹хедер;
🔹главный экран с большим изображением;
🔹3 экрана с описанием сервиса: один с картинкой справа, второй с картинкой слева, третий с картинкой справа;
🔹экран с отзывами;
🔹футер.

Следите, чтобы каждая новая группа компонентов ставилась ровно под предыдущую — при перетаскивании система покажет, куда именно вы ставите: верхняя группа подсветится красной рамкой, а в месте установки будет синяя черта. Даже если ошибётесь, ничего — на левой панели в Element tree посмотрите, куда и что встало, и перетащите в нужные места.

Здесь можно отредактировать тексты, удалить из хедера ненужные кнопки и ссылки, прописать или вставить логотип, добавить фотографии и скриншоты. Фоновый цвет для футера и первого экрана первой страницы предлагается делать одинаковым, чтобы получился единый переход. И это классное решение, но финальное — за вами, вы же разработчик.

На этом этапе поработайте с адаптивностью. Чтобы ваше приложение хорошо смотрелось на любых экранах, не делайте им минимальную фиксированную ширину. 

Следуйте вот этому правилу: главная группа (родительский компонент), в котором лежат остальные компоненты, растягивается по всей ширине экрана. Следующая в иерархии группа (child-компонент, «ребёнок») с определённой максимальной шириной. А компоненты (также child-компоненты) внутри уже адаптируются под конкретный размер контента.

К примеру, вся Index страница — 1440 рх шириной, выравнивание типа колонка с последовательным расположением групп на ней. Все следующие группы — её child-компоненты. Им выставляйте нулевую минимальную ширину (чтобы она адаптировалась под меньшие размеры экрана) и максимальную ширину 1200 рх, чтобы она не растягивалась. Внутри компоненты должны быть адаптированы под конкретный контент: текст или фотографии.

➖➖➖➖➖➖➖➖➖➖➖➖

Хотите быстро научиться разрабатывать IT-продукты с помощь Bubble и зарабатывать на этом? Приходите на наш курс «Веб-разработчик без кода». У нас осталось 4 свободных места на ближайший поток, который стартует 20 декабря 💙

ХОЧУ ОСВОИТЬ BUBBLE: codebreakers.tech/bubble

BY Code Breakers | No-code solutions